<template>
    <div id="search">
        <header>
            <ul class="clearfix">
                <li class="sound_recording" @click="back"><van-icon name="arrow-left" /></li>
                <li class="search">
                    <van-search placeholder="search" v-model="value" @search="onSearch" />
                </li>
            </ul>
        </header>
        <!-- 搜索内容 -->
        <div class="searchData">
            <van-tabs v-model="active">
                <van-tab title="单曲">
                   <ul class="songUl">
                       <li class="clearfix" v-for="(item,index) in songData" :key='index' @click="playMusic(item)">
                           <div class="artists">
                               <div class="artistsTitle">{{item.name}}</div>
                               <div class="artistsName" ><span v-html="brightenKeyword(item.artists[0].name,value)">{{item.artists[0].name}}</span> - {{item.album.name}} </div>
                           </div>
                           <div class="sgchfr"><span></span></div>
                       </li>
                   </ul>
                </van-tab>
                <van-tab title="歌单">
                    <ul class="songListUl">
                        <li class="clearfix" v-for="(item,index) in songListData" :key='index' @click="songSheetTo(item)" >
                            <div class="icon">
                                <img :src="item.coverImgUrl" alt="">
                            </div>
                            <div class="songdescribe">
                                <div class="describeTitle" v-html="brightenKeyword(item.name,value)" >{{item.name}}</div>
                                <div class="describePlaylist">{{item.trackCount}}首音乐 by{{item.creator.nickname}},播放{{item.playCount.toString().length>5?(item.playCount/10000)+'万':item.playCount}}次</div></div>
                        </li>
                    </ul>
                </van-tab>
                <van-tab title="歌手">
                    <ul class="singerUl">
                        <li class="clearfix" v-for="(item,index) in singerData" :key="index">
                            <div class="icon">
                                <img :src="item.img1v1Url" alt="">
                            </div>
                            <div class="singerName">
                                <span v-html="brightenKeyword(item.name,value)">{{item.name}}</span> <span v-if="item.alias[0]" style="color:#888"> ({{item.alias[0]}})</span>
                            </div>
                        </li>
                    </ul>
                </van-tab>
                <van-tab title="用户">
                    <ul class="userUl">
                        <li class="clearfix" v-for="(item,index) in userData" :key="index" @click="getUser(item)">
                            <div class="icon">
                                <img :src="item.avatarUrl" alt="">
                            </div>
                            <div class="singerName">
                                <span v-html="brightenKeyword(item.nickname,value)">{{item.nickname}}</span>
                            </div>
                            <div class="followPlus">
                                <span>+关注</span>
                            </div>
                        </li>
                    </ul>
                </van-tab>
            </van-tabs>
        </div>
        <!-- 底部导航 -->
        <Tabbar></Tabbar>
    </div>
</template>
<script>
import {mapGetters,mapState,mapMutations,mapActions} from "vuex";
import Tabbar from '@/components/Tabbar.vue'
export default {
    data () {
        return {
            value:'',//搜索框内容
            songData:[],//单曲
            songListData:[],//歌单
            singerData:[],//歌手
            userData:[],//用户
            active:0,//设置那一页最先显示
            songSheets:{//歌单详情 
                coverImgUrl:null,//歌单背景图
                id:null,
                name:null,//歌单名
                nickname:null,//用户名
                userId:null,//用户id
                count:0
            },
            musicDetail:{//音乐id
                songId:null,//歌单id
                id:null,//音乐id
                title:null,//歌曲名字
                author:null,//作者
                img:null,//背景图
                url:null,//歌曲地址
                lrc:null,//歌词
                list:[],//歌曲列表
            },
            searchLists:[],
            isAplayer:null,//控制播放器

        }
    },
    components: {
       Tabbar 
    },
    computed: {
        ...mapState(["searchList"])
    },
    watch: {
        'searchList':{
            handler:function(newVal,oldVal){
               this.searchData()
            }
        } 
    },
    created () {
        this.searchData()
    },
    methods: {
        back(){
          this.$router.go(-1);//返回上一层
        },
        searchData(){
            //填充搜索内容
            this.value = this.searchList[0];
            const paramsSong = {//单曲
                keywords:this.value,
                type:1,
            }
            const paramsSongList = {//歌单
                keywords:this.value,
                type:1000,
            }
            const paramsSinger = {//歌手
                keywords:this.value,
                type:100,
            }
            const paramsUser = {//用户
                keywords:this.value,
                type:1002,
            }
            this.axios.all([
                this.axios.get('/music/search',{params:paramsSong}),//歌曲
                this.axios.get('/music/search',{params:paramsSongList}),//歌单
                this.axios.get('/music/search',{params:paramsSinger}),//歌手
                this.axios.get('/music/search',{params:paramsUser}), //用户
            ]).then(this.axios.spread((song,songList,singer,user) => {
                this.songData = song.data.result.songs;
                this.songListData = songList.data.result.playlists;
                this.singerData = singer.data.result.artists;
                this.userData = user.data.result.userprofiles;
                this.songData.forEach(item =>{
                    const url = 'https://music.163.com/song/media/outer/url?id='+item.id+'.mp3 ';
                    this.musicDetail.list.push({
                        id:item.id,
                        img:item.album.blurPicUrl,
                        title:item.name,
                        author:item.artists[0].name,
                        url:url,
                        lrc:null,
                    })
                })
                this.$store.commit('getMusicDetail', this.musicDetail);
            }))
        },
        //用户信息跳转
        getUser(item){
            this.songSheets.userId = item.userId;
            this.$store.commit('getSongSheet', this.songSheets);
            this.$router.push('/userDetail');
        },
        //歌单跳转
        songSheetTo(item){
            this.musicDetail.songId = item.id;
            this.$store.commit('getMusicDetail', this.musicDetail);
            this.$router.push('/playMusic');
        },
        //点击搜索历史搜索
        onSearch(){
            this.searchLists.unshift(this.value);
            this.$store.commit('getSearchList', this.searchLists);
        },
         //将当前要播放的音乐name传入到vuex中
        playMusic (item){
            const url = 'https://music.163.com/song/media/outer/url?id='+item.id+'.mp3 '   
            //当前播放列表
            this.musicDetail.id = item.id;
            this.musicDetail.img = item.album.blurPicUrl;
            this.musicDetail.title = item.name;
            this.musicDetail.author = item.artists[0].name;
            this.musicDetail.url = url;
            this.$store.commit('getMusicDetail', this.musicDetail);
            //控制显示播放器
            this.isAplayer = true;
            this.$store.commit('getAplayer',this.isAplayer)
        },
        brightenKeyword(val, keyword) {
            val = val + '';
            if (val.indexOf(keyword) !== -1 && keyword !== '') {
                    return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>')
            } else {
                return val
            }
        }
    }
}
</script>
<style lang='less'>
    #search{
        header{
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #fff;
            color: #000;
            position: fixed;
            top:0;
            z-index: 99;
            width: 100%;
            ul{
                li{
                    float: left;
                    width: 15%;
                }
                .search{
                    width: 80%;
                    background-color: #F7F7F7;
                    border-radius: 20px;
                    color: #000;
                    height: 36px;
                    line-height: 36px;
                    margin-top: 7px;
                    .van-search{
                        padding: 0;
                        .van-search__content{
                            border-radius: 20px;
                        }
                    }
                    .van-field__control{
                        height: 36px;
                    }
                    .van-cell--borderless{
                        line-height: 36px;
                        padding: 0;
                    }
                    .van-icon-search{
                        vertical-align: middle;
                        font-size: 16px;
                        color: #ccc;
                        
                    }
                    .hotname{
                        color: #ccc;
                        font-size: 14px;
                        margin-left: 5px;
                    }
                }
                .sound_recording{
                    .van-icon-arrow-left{
                        font-size: 18px;
                        vertical-align: middle;
                    }
                }
                .in_play{
                   span{
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        background-position: 0;
                        background-repeat: no-repeat;
                        background-size: 18px 18px;
                        vertical-align: middle;
                        background-image: url('../images/wyy/in_play_black.svg');
                    }
                }
            }
        }
        .searchData{
            margin-top: 50px;
            .van-hairline--top-bottom::after {
                border-top: none;
            }
            .van-tabs__line{
                background-color: #000;
            }
            .van-tab--active{
                color: #000;
            }
            .van-tab__pane{
                margin: 0;
            }
            .van-hairline--top-bottom{
                position: fixed;
                top: 50px;
                width: 100%;
            }
            .songUl{
                padding: 0 15px;
                li{
                    height: 40px;
                    padding: 5px 0;
                    border-bottom : solid 1px #f3f3f3; 
                    .artists{
                        float: left;
                        width: 80%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        .artistsName{
                            color: #888;
                            font-size: 10px;
                            margin-top: 4px;
                        }
                        .artistsTitle{
                            font-size: 14px;
                        }

                    }
                    .sgchfr{
                        height: 100%;
                        line-height: 40px;
                        width: 20%;
                        float: right;
                        text-align: right;
                        span{
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            background-position: 0;
                            background-repeat: no-repeat;
                            background-size: 18px 18px;
                            background-image: url('../images/wyy/more.svg');
                        }
                    }
                }
            }
            .songListUl{
                padding: 0 15px;
                li{
                    margin-top: 8px;
                    .icon{
                        float: left;
                        width: 45px;
                        height: 45px;
                        margin-right: 5px;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 10px;
                        }
                    }
                    .songdescribe{
                        float: left;
                        width: 80%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        .describePlaylist{
                            overflow: hidden;
                            font-size: 10px;
                            margin-top: 5px;
                            color: #888;
                        }
                    }
                }
            }
            .singerUl{
                padding: 0 15px;
                li{
                    height: 45px;
                    margin-top: 10px;
                    .icon{
                        float: left;
                        width: 45px;
                        height: 45px;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }

                    }
                    .singerName{
                        margin-left: 5px;
                        float: left;
                        height: 100%;
                        line-height: 45px;
                    }
                }
            }
            .userUl{
                padding: 0 15px;
                li{
                    height: 45px;
                    margin-top: 10px;
                    .icon{
                        float: left;
                        width: 45px;
                        height: 45px;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }

                    }
                    .singerName{
                        margin-left: 5px;
                        float: left;
                        height: 100%;
                        line-height: 45px;
                    }
                    .followPlus{
                        float: right;
                        height: 100%;
                        line-height: 45px;
                        span{
                            border: solid 1px #000;
                            padding: 3px 10px;
                            border-radius:15px; 
                            font-size: 12px;
                        }
                    }
                    
                }
            }
        }
    }
</style>


